<template>
  <div class="mainapp">
    <div class="app-container">
      <el-row>
        <el-card>
          <div style="height: 366px">
            <div style="height: 61px">
              <img
                style="height: 30px; vertical-align: middle"
                src="../../../assets/showImages/dataVivew/titlezs.png"
                alt=""
              />
              <div class="topTitle">员工规模</div>
            </div>
            <div>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="systemNum">
                    <div class="systemTitle">
                      员工人数
                    </div>
                    <div class="systemCenter">
                      <div style="height: 43px;
                      line-height:43px;
                      font-size: 58px;
                                font-family: LcdD;
                                font-weight: 400;
                                color: #3D78FC;
                                float:left"
                      >
                        1500
                      </div>
                      <div style="line-height:43px;font-size: 18px;
font-family: Microsoft YaHei;float:right
">
                        <span style="font-weight: 400;
color: #3A4B6B">同比</span><span style="font-weight: bold;
color: #08AE00;">+31.33, +13.31%</span>
                      </div>
                    </div>
                    <div class="systemBtton">
                      <div id="myEachartsOne" :style="{height:'200px'}">

                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="systemNum">
                    <div class="systemTitle">
                      在岗人数
                    </div>
                    <div class="systemCenter">
                      <div style="height: 43px;
                      line-height:43px;
                      font-size: 58px;
                                font-family: LcdD;
                                font-weight: 400;
                                color: #3D78FC;
                                float:left"
                      >
                        1500
                      </div>
                      <div style="line-height:43px;font-size: 18px;
font-family: Microsoft YaHei;float:right
">
                        <span style="font-weight: 400;
color: #3A4B6B">同比</span><span style="font-weight: bold;
color: #08AE00;">+31.33, +13.31%</span>
                      </div>
                    </div>
                    <div class="systemBtton">
                      <div id="sss" :style="{height:'180px'}"></div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="systemNum">
                    <div class="systemTitle">
                      “三级体系”
                    </div>

                    <div class="systemBtton">
                      <div id="san" :style="{height:'260px'}"></div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="systemNum">
                    <div class="systemTitle">
                      “四类体系”
                    </div>
                    <div class="systemBtton">
                      <div id="four" :style="{height:'260px'}"></div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-row>
      <el-row class="marginTop">
        <el-card>
          <div style="height: 366px">
            <div style="height: 61px">
              <img
                style="height: 30px; vertical-align: middle"
                src="../../../assets/showImages/dataVivew/titlezs.png"
                alt=""
              />
              <div class="topTitle">员工结构</div>
            </div>
            <div>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="systemNum">
                    <div class="systemTitle">
                      员工年龄
                    </div>
                    <div class="systemBtton">
                      <div id="five" :style="{height:'260px'}"></div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="systemNum">
                    <div class="systemTitle">
                      员工学历
                    </div>
                    <div class="systemBtton">
                      <div id="six" :style="{height:'280px'}"></div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="systemNum">
                    <div class="systemTitle">
                      员工职称
                    </div>

                    <div class="systemBtton">
                      <div id="zhi" :style="{height:'280px'}"></div>
                    </div>

                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="systemNum">
                    <div class="systemTitle">
                      员工岗级
                    </div>
                    <div class="systemBtton">
                      <div id="eight" :style="{height:'280px'}"></div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-row>
      <el-row class="marginTop">
        <el-card>
          <div style="height: 366px">
            <div style="height: 61px">
              <img
                style="height: 30px; vertical-align: middle"
                src="../../../assets/showImages/dataVivew/titlezs.png"
                alt=""
              />
              <div class="topTitle">员工体系</div>
            </div>
            <div>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="systemNum">
                    <div style="height:76px">
                      <div class="systemTitle" style="float: left">
                        员工人数趋势
                      </div>
                      <div style="float: right;padding: 24px 24px 24px 0;">
                        <ul style="width: 216px;line-height: 24px;
height: 24px;
background: rgba(141, 152, 173,0.15);
border-radius: 12px;display: flex;justify-content: space-between;">
                          <li v-for="(item,index) in monthYear" :key="index"
                              :class="active==index?'activeColorActive':'activeColor'" @click="activeColors(item,index)"
                             >
                            {{item}}
                          </li>
                        </ul>
                      </div>
                    </div>

                    <div id="nice" :style="{height:'260px'}">

                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="systemNum">
                    <div style="height:76px">
                      <div class="systemTitle" style="float: left">
                        “三级”体系人员趋势
                      </div>
                      <div style="float: right;padding: 24px 24px 24px 0;">
                        <ul style="width: 216px;line-height: 24px;
height: 24px;
background: rgba(141, 152, 173,0.15);
border-radius: 12px;display: flex;justify-content: space-between;">
                          <li v-for="(item,index) in monthYear" :key="index"
                              :class="activeTwo==index?'activeColorActive':'activeColor'"
                              @click="activeColorTwo(item,index)">
                            {{item}}
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div id="ten" :style="{height:'260px'}"></div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="systemNum">
                    <div style="height:76px">
                      <div class="systemTitle" style="float: left">
                        “四类”体系人员趋势
                      </div>
                      <div style="float: right;padding: 24px 24px 24px 0;">
                        <ul style="width: 216px;line-height: 24px;
height: 24px;
background: rgba(141, 152, 173,0.15);
border-radius: 12px;display: flex;justify-content: space-between;">
                          <li v-for="(item,index) in monthYear" :key="index"
                              :class="activeThree==index?'activeColorActive':'activeColor'"
                              @click="activeColorThree(item,index)">
                            {{item}}
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div id="ele" :style="{height:'260px'}">

                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-row>
    </div>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                monthYear: ['月度', '季度', '年度',],
                active: 0,
                activeTwo: 0,
                activeThree: 0,
                xdatas: [],
                ydata: [],
                data3 : ['2018', '2019', '2020', '2021', '2022',],
                data1 :['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                data2 : ['一季度', '二季度', '三季度', '四季度',],
            }
        },
        mounted() {
            if (this.active == 0) {
                this.xdatas = this.data1;
            }
            this.myEachartsOne();
            this.nyEcharts1();
            this.nyEcharts2();
            this.nyEcharts4();
            this.nyEchartsFive();
            this.nyEchartsSix();
            this.nyEcharts7();
            this.nyEchartsEight();
            this.nyEchartsNice();
            this.nyEchartsTen();
            this.nyEchartsEle();
        },
        methods: {
            activeColors(item, index) {
                this.active = index;
                if (index == 0) {
                    this.xdatas = this.data1;
                    this.nyEchartsNice();
                } else if (index == 1) {
                    this.xdatas = this.data2;
                    this.nyEchartsNice();
                    console.log(this.xdata, 123)
                } else if (index == 2) {
                    this.xdatas = this.data3;
                    this.nyEchartsNice();
                }
            },
            activeColorTwo(item, index) {
                this.activeTwo = index;
                if (index == 0) {
                    this.xdatas = this.data1;
                    this.nyEchartsTen();
                } else if (index == 1) {
                    this.xdatas = this.data2;
                    this.nyEchartsTen();
                    console.log(this.xdata, 123)
                } else if (index == 2) {
                    this.xdatas = this.data3;
                    this.nyEchartsTen();
                }
            },
            activeColorThree(item, index) {
                this.activeThree = index;
                if (index == 0) {
                    this.xdatas = this.data1;
                    this.nyEchartsEle();
                } else if (index == 1) {
                    this.xdatas = this.data2;
                    this.nyEchartsEle();
                    console.log(this.xdata, 123)
                } else if (index == 2) {
                    this.xdatas = this.data3;
                    this.nyEchartsEle();
                }
            },
            myEachartsOne() {
                var chartDom = document.getElementById('myEachartsOne');
                var myChart = this.$echarts.init(chartDom);
                var option;
                option = {
                    // color: ['#23649e', '#2e7bad', '#1dc499', '#4da7c1', '#65b5c2', "rgba(250,250,250,0.3)"],
                    grid: {
                        left: 0,
                        // right: 0,
                        bottom: 0,
                        top: 0,
                        containLabel: true
                    },
                    // grid: {
                    //     bottom: 150,
                    //     left: 100,
                    //     right: '10%'
                    // },
                    legend: {
                        show: false,
                        // orient: 'vertical',
                        // top: "middle",
                        // right: "12%",
                        // textStyle: {
                        //     color: '#788288',
                        //     fontSize: 13,
                        // },
                        // icon: 'roundRect',
                        // data: [{"name": "1","value": 10},
                        //     {"name": "2","value": 10},
                        //     { "name": "3","value": 10},
                        //     {"name": "4","value": 10},
                        //     {"name": "5","value": 10},  ],
                    },

                    series: [
                        // 主要展示层的
                        {
                            radius: ['60%', '73%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            startAngle: 180,
                            label: {
                                show: false,
                                // normal: {
                                show: true,
                                formatter: "{a|{b}:{c}%}\n{hr|}",
                                color: '#fffdef',
                                rich: {
                                    hr: {
                                        backgroundColor: "auto",
                                        borderRadius: 5,
                                        width: 5,
                                        height: 5,
                                        align: 'left'
                                    },
                                    a: {
                                        padding: [-10, 10, 0, 10]
                                    }
                                }
                                // textStyle: {
                                //     fontSize: 13,
                                // },
                                // position: 'outside'
                                // },
                                // emphasis: {
                                //     show: true
                                // }
                            },
                            labelLine: {
                                normal: {
                                    show: true,
                                    length: 20,
                                    length2: 35
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 2,
                                    borderColor: '#fff'
                                }
                            },
                            name: "",
                            data: [
                                {
                                    "name": "总部", "value": 10, itemStyle: {
                                        color: "#33B4FF"
                                    }
                                },
                                {
                                    "name": "借调&聘用", "value": 10, itemStyle: {
                                        color: "#3D78FC"
                                    }
                                },
                                {
                                    "name": "昆明", "value": 10, itemStyle: {
                                        color: "#2E57B3"
                                    }
                                },
                                {
                                    "name": "外籍员工", "value": 10, itemStyle: {
                                        color: "#0FCE8B"
                                    }
                                },
                            ],
                        },
                        // 边框的设置
                        {
                            radius: ['60%', '43%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            startAngle: 180,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 2,
                                    borderColor: '#fff'
                                }
                            },
                            animation: false,
                            tooltip: {
                                show: false
                            },
                            data: [{
                                value: 1,
                                itemStyle: {
                                    color: "#C6EFE5",
                                },
                            }, {
                                value: 1,
                                itemStyle: {
                                    color: "#C6EFE5",
                                },
                            }, {
                                value: 1,
                                itemStyle: {
                                    color: "#C6EFE5",
                                },
                            }, {
                                value: 1,
                                itemStyle: {
                                    color: "#C6EFE5",
                                },
                            }
                            ],
                        },
                    ]
                };
                option && myChart.setOption(option);
            },
            nyEcharts1() {
                var chartDom = document.getElementById('sss');
                var myChart = this.$echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // Use axis to trigger tooltip
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    legend: {
                        itemWidth: 10,
                        itemHeight: 10, textStyle: {color: "#3A4B6B",},
                        x: "left",
                        padding: [0, 0, 0, 20],
                    },

                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        show: false,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        type: 'value'
                    },
                    yAxis: {
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        type: 'category',
                        data: ['上期', '本期']
                    },
                    series: [
                        {
                            name: '总部',
                            type: 'bar', barWidth: 16,
                            itemStyle: {
                                /*设置折线颜色*/
                                normal: {
                                    color: '#3D78FC'
                                }
                            },
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [130, 200, 140]
                        },
                        {
                            name: '昆明',
                            itemStyle: {
                                /*设置折线颜色*/
                                normal: {
                                    color: '#33B4FF'
                                }
                            },
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '项目公司',
                            type: 'bar',
                            itemStyle: {
                                /*设置折线颜色*/
                                normal: {
                                    color: '#0FCE8B'
                                }
                            },
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [220, 182, 191]
                        }
                    ]
                };

                option && myChart.setOption(option);
            },
            nyEcharts2() {
                var chartDom = document.getElementById('san');
                var myChart = this.$echarts.init(chartDom);
                var option;
                option = {
                    // grid: {
                    //         left: '3%',
                    //         right: '4%',
                    //         bottom: '12%',
                    //         containLabel: true
                    //     },
                    legend: {
                        itemWidth: 10,
                        itemHeight: 10, textStyle: {color: "#3A4B6B",},
                        x: "left",
                        padding: [0, 0, 0, 20],
                    },
                    tooltip: {},
                    dataset: {
                        source: [
                            ['product', '本期',
                                '同期'],
                            ['高级', 54, 48],
                            ['中级', 90, 64],
                            ['初级', 48, 64]
                        ]
                    },
                    xAxis: {
                        type: 'category', axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    yAxis: {
                        // splitLine: {
                        //     show: false,
                        //   },
                        axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [{
                        type: 'bar', barWidth: 16, itemStyle: {
                            /*设置折线颜色*/
                            normal: {
                                color: '#3D78FC',
                            }
                        },
                    }, {
                        type: 'bar', barWidth: 16, itemStyle: {
                            /*设置折线颜色*/
                            normal: {
                                color: '#33B4FF'
                            }
                        },
                    }]
                };

                option && myChart.setOption(option);
            },
            nyEcharts4() {
                var chartDom = document.getElementById('four');
                var myChart = this.$echarts.init(chartDom);
                var option;
                option = {
                    // grid: {
                    //         left: '3%',
                    //         right: '4%',
                    //         bottom: '12%',
                    //         containLabel: true
                    //     },
                    legend: {
                        itemWidth: 10,
                        itemHeight: 10, textStyle: {color: "#3A4B6B",},
                        x: "left",
                        padding: [0, 0, 0, 20],
                    },
                    tooltip: {},
                    dataset: {
                        source: [
                            ['product', '本期',
                                '同期'],
                            ['市场开发', 54, 48],
                            ['建设', 90, 64],
                            ['运营', 48, 64],
                            ['管理', 43, 50]
                        ]
                    },
                    xAxis: {
                        type: 'category', axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    yAxis: {
                        // splitLine: {
                        //     show: false,
                        //   },
                        axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [{
                        type: 'bar', barWidth: 16, itemStyle: {
                            /*设置折线颜色*/
                            normal: {
                                color: '#3D78FC',
                            }
                        },
                    }, {
                        type: 'bar', barWidth: 16, itemStyle: {
                            /*设置折线颜色*/
                            normal: {
                                color: '#33B4FF'
                            }
                        },
                    }]
                };

                option && myChart.setOption(option);
            },
            nyEchartsFive() {
                var chartDom = document.getElementById('five');
                var myChart = this.$echarts.init(chartDom);
                var option;
                option = {
                    grid: {
                        top: "5%",
                        left: '3%',
                        right: '4%',
                        bottom: '12%',
                        containLabel: true
                    },
                    // legend: {
                    //     itemWidth: 10,
                    //     itemHeight: 10, textStyle: {color: "#3A4B6B",},
                    //     x: "left",
                    //     padding: [0, 0, 0, 20],
                    // },
                    tooltip: {},
                    dataset: {
                        source: [

                            ['<25', 54,],
                            ['26-30岁', 90,],
                            ['31-40岁', 48,],
                            ['>40岁', 30,]

                        ]
                    },
                    xAxis: {
                        type: 'category', axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    yAxis: {
                        // splitLine: {
                        //     show: false,
                        //   },
                        axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [{
                        type: 'bar', barWidth: 16, itemStyle: {
                            /*设置折线颜色*/
                            normal: {
                                color: '#3D78FC',
                            }
                        },
                    },]
                };

                option && myChart.setOption(option);
            },
            nyEchartsSix() {
                var chartDom = document.getElementById('six');
                var myChart = this.$echarts.init(chartDom);
                var option;
                option = {

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}%'
                    },

                    legend: {
                        itemWidth: 10, itemHeight: 10, x: "left", padding: [0, 0, 0, 30],
                        // data: ['学士', '硕士', '博士', ]

                    },
                    grid: {
                        top: '25%',//距上边距

                        left: '25%',//距离左边距

                        right: '25%',//距离右边距

                        bottom: '25%',//距离下边距

                    },
                    series: [
                        {
                            type: 'funnel',
                            left: '10%',
                            top: 60,
                            bottom: 60,
                            width: '80%',
                            min: -30,
                            max: 150,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: "ascending",
                            gap: 2,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 18
                                }
                            },
                            data: [
                                {
                                    value: 30, name: '学士', itemStyle: {
                                        color: "#0FCE8B",
                                    },
                                },
                                {
                                    value: 70, name: '硕士', itemStyle: {
                                        color: "#33B4FF",
                                    },
                                },
                                {
                                    value: 100, name: '博士', itemStyle: {
                                        color: "#3D78FC",
                                    },
                                },

                            ]
                        }
                    ]
                };

                option && myChart.setOption(option);
            },
            nyEcharts7() {
                var chartDom = document.getElementById('zhi');
                var myChart = this.$echarts.init(chartDom);
                var option;
                option = {

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}%'
                    },

                    legend: {
                        itemWidth: 10, itemHeight: 10, x: "left", padding: [0, 0, 0, 30],
                        // data: ['初级', '中级', '副高', '正高', ]

                    },
                    grid: {
                        top: '25%',//距上边距

                        left: '25%',//距离左边距

                        right: '25%',//距离右边距

                        bottom: '25%',//距离下边距

                    },
                    series: [
                        {
                            type: 'funnel',
                            left: '10%',
                            top: 60,
                            bottom: 60,
                            width: '80%',
                            min: -30,
                            max: 150,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: "ascending",
                            gap: 2,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 18
                                }
                            },
                            data: [
                                {
                                    value: 30, name: '初级', itemStyle: {
                                        color: "#0FCE8B",
                                    },
                                },
                                {
                                    value: 70, name: '中级', itemStyle: {
                                        color: "#33B4FF",
                                    },
                                },
                                {
                                    value: 100, name: '副高', itemStyle: {
                                        color: "#3D78FC",
                                    },
                                },
                                {
                                    value: 300, name: '正高', itemStyle: {
                                        color: "#2E57B3",
                                    },
                                },

                            ]
                        }
                    ]
                };

                option && myChart.setOption(option);
            },
            nyEchartsEight() {
                var chartDom = document.getElementById('eight');
                var myChart = this.$echarts.init(chartDom);
                var option;
                option = {

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}%'
                    },

                    legend: {
                        itemWidth: 10, itemHeight: 10, x: "left", padding: [0, 0, 0, 30],
                        // data: ['岗级一', '岗级二', '岗级三',  ]

                    },
                    grid: {
                        top: '25%',//距上边距

                        left: '25%',//距离左边距

                        right: '25%',//距离右边距

                        bottom: '25%',//距离下边距

                    },
                    series: [
                        {
                            type: 'funnel',
                            left: '10%',
                            top: 60,
                            bottom: 60,
                            width: '80%',
                            min: -30,
                            max: 150,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: "ascending",
                            gap: 2,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 18
                                }
                            },
                            data: [
                                {
                                    value: 30, name: '岗级一', itemStyle: {
                                        color: "#0FCE8B",
                                    },
                                },
                                {
                                    value: 70, name: '岗级二', itemStyle: {
                                        color: "#33B4FF",
                                    },
                                },
                                {
                                    value: 100, name: '岗级三', itemStyle: {
                                        color: "#3D78FC",
                                    },
                                },


                            ]
                        }
                    ]
                };

                option && myChart.setOption(option);
            },
            nyEchartsNice() {
                var myChart = this.$echarts.init(document.getElementById('nice'));
// 指定图表的配置项和数据
                var option = {
                    color: ["#0FCE8B", "#3D78FC", "#33B4FF"],
                    tooltip: {},
                    legend: {
                        itemWidth: 10, itemHeight: 10,
                        data: ['总部', '北京', '聘用'],
                        left: '8%',
                    },
                    xAxis: {
                        axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false,
                        },
                        data: this.xdatas,
                    },
                    yAxis: {
                        axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    series: [{
                        name: '总部',
                        type: 'bar',
                        barWidth: 16,
                        stack: '人员',
                        data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
                    },
                        {
                            name: '北京',
                            type: 'bar',
                            stack: '人员',
                            data: [15, 25, 26, 20, 10, 20, 5, 20, 36, 10, 10, 20]
                        },
                        {
                            name: '聘用',
                            type: 'bar',
                            stack: '人员',
                            data: [15, 25, 26, 20, 10, 20, 5, 20, 36, 10, 10, 20]
                        },
                    ]
                };
// 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            nyEchartsTen() {
                var myChart = this.$echarts.init(document.getElementById('ten'));
// 指定图表的配置项和数据
                var option = {
                    color: ["#0FCE8B", "#3D78FC", "#33B4FF"],
                    tooltip: {},
                    legend: {
                        itemWidth: 10, itemHeight: 10,
                        data: ['高级', '中级', '初级'],
                        left: '8%',
                    },
                    xAxis: {
                        axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false,
                        },
                        data: this.xdatas,
                    },
                    yAxis: {
                        axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    series: [{
                        name: '高级',
                        type: 'bar',
                        barWidth: 16,
                        stack: '人员',
                        data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
                    },
                        {
                            name: '中级',
                            type: 'bar',
                            stack: '人员',
                            data: [15, 25, 26, 20, 10, 20, 5, 20, 36, 10, 10, 20]
                        },
                        {
                            name: '初级',
                            type: 'bar',
                            stack: '人员',
                            data: [15, 25, 26, 20, 10, 20, 5, 20, 36, 10, 10, 20]
                        },
                    ]
                };
// 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            nyEchartsEle() {
                var myChart = this.$echarts.init(document.getElementById('ele'));
// 指定图表的配置项和数据
                var option = {
                    color: ["#0FCE8B", "#3D78FC", "#33B4FF"],
                    tooltip: {},
                    legend: {
                        itemWidth: 10, itemHeight: 10,
                        data: ['市场开发', '建设', '运营', '管理'],
                        left: '8%',
                    },
                    xAxis: {
                        axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false,
                        },
                        data: this.xdatas,
                    },
                    yAxis: {
                        axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    series: [{
                        name: '市场开发',
                        type: 'bar',
                        barWidth: 16,
                        stack: '人员',
                        data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
                    },
                        {
                            name: '建设',
                            type: 'bar',
                            stack: '人员',
                            data: [15, 25, 26, 20, 10, 20, 5, 20, 36, 10, 10, 20]
                        },
                        {
                            name: '运营',
                            type: 'bar',
                            stack: '人员',
                            data: [15, 25, 26, 20, 10, 20, 5, 20, 36, 10, 10, 20]
                        },
                        {
                            name: '管理',
                            type: 'bar',
                            stack: '人员',
                            data: [15, 25, 26, 20, 10, 20, 5, 20, 36, 10, 10, 20]
                        },
                    ]
                };
// 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }

    }

</script>
<style lang="scss" scoped>
  .mainapp {
    min-height: calc(100vh - 84px);
    width: 100%;
    position: relative;
    overflow: hidden;
    background: url("../../../assets/showImages/dataVivew/backdrop.png") 0 0 no-repeat;
    background-size: cover;
  }

  .topTitle {
    display: inline-block;
    font-size: 28px;
    font-weight: 400;
    color: #3a4b6b;
    vertical-align: middle;
  }

  .systemNum {
    height: 314px;
    background: #EDF1F9;
    border-radius: 4px;
  }

  .marginTop {
    margin-top: 25px
  }

  .systemTitle {
    font-size: 22px;
    font-family: 微软雅黑;
    font-weight: bold;
    color: #3A4B6B;
    padding: 24px 24px 24px;
  }

  .systemCenter {
    padding: 0px 23px 36px
  }

  #sss {
    margin-top: 40px;
  }

  li {
    list-style: none;
  }

  ul {
    margin: 0;
    padding: 0;
    cursor: pointer;
    /*padding:0 10px;*/
  }

  .activeColor {
    width: 72px;
    height: 24px;
    text-align: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #59709D;
  }

  .activeColorActive {
    background: #3D78FC;
    border-radius: 12px;
    width: 72px;
    height: 24px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
</style>
